<template>
	<!-- 页面整体容器 -->
	<view>
		<!-- 顶部提示信息区域 -->
		<view class="top-prompt">
			<!-- 提示信息文本 -->
			<text>信息仅用于车辆认证，智运保障您的信息安全</text>
		</view>
		<!-- 驾驶证上传提示区域 -->
		<view class="content">
			<!-- 左侧蓝色竖条 -->
			<view class="box"></view>
			<!-- 提示文本 -->
			<view class="photo"><text>请上传身份证照片</text></view>
		</view>

		<view class="biaoge">
			<!-- 表单元素，用于收集用户输入信息 -->
			<form>
				<!-- 第一个表单项，用于输入持卡人姓名 -->
				<view class="form-item">
					<!-- 表单项的标签，提示用户输入的内容 -->
					<label>持卡人</label>
					<!-- 输入框和图标所在的容器 -->
					<view class="input-wrapper">
						<!-- 输入框，用于输入持卡人姓名，使用 v-model 进行数据双向绑定 -->
						<input class="no-border-input" type="text" v-model="formData.carName" placeholder="请输入车主姓名" />
					</view>
				</view>
				<!-- 第二个表单项，用于输入身份证号 -->
				<view class="form-item">
					<!-- 表单项的标签，提示用户输入的内容 -->
					<label>身份证号</label>
					<!-- 输入框和图标所在的容器 -->
					<view class="input-wrapper">
						<!-- 输入框，用于输入持卡人姓名，使用 v-model 进行数据双向绑定 -->
						<input class="no-border-input" type="text" v-model="formData.carnumber" placeholder="请输入车牌号" />
					</view>
				</view>
			</form>
		</view>


		<!-- 从业资格证上传提示区域 -->
		<view class="content">
			<!-- 左侧蓝色竖条 -->
			<view class="box"></view>
			<!-- 提示文本 -->
			<view class="photo"><text>请上传车辆信息</text></view>
		</view>
		<!-- 上传资格证 -->
		<view class="upload-btn" @click="uploadQualificationImage">
			<!-- 当没有上传图片时，显示默认提示图 -->
			<view v-if="!car" class="upload-icon-wrapper">
				<view class="upload-icon2">
					<image src="/photo/driver-autnentication/camera-upload.png" style="width: 50rpx; height: 50rpx;">
					</image>
				</view>
				<text class="upload-text">上传资格证</text>
			</view>
			<!-- 当上传图片时，显示上传的图片 -->
			<view class="upload-btn uploaded" v-else>
				<image :src="car" class="upload-icon" />
				<view class="close-btn" @click.stop="removeQualificationImage">×</view>
			</view>
		</view>
		<!-- 从业资格证上传提示区域 -->
		<view class="content">
			<!-- 左侧蓝色竖条 -->
			<view class="box"></view>
			<!-- 提示文本 -->
			<view class="photo"><text>请上传行驶证正面照片</text></view>
		</view>
		<!-- 上传资格证 -->
		<view class="upload-btn" @click="uploadXingshiImage">
			<!-- 当没有上传图片时，显示默认提示图 -->
			<view v-if="!xingshiImg" class="upload-icon-wrapper">
				<view class="upload-icon2">
					<image src="/photo/driver-autnentication/camera-upload.png" style="width: 50rpx; height: 50rpx;">
					</image>
				</view>
				<text class="upload-text">上传行驶证正面</text>
			</view>
			<!-- 当上传图片时，显示上传的图片 -->
			<view class="upload-btn uploaded" v-else>
				<image :src="xingshiImg" class="upload-icon" />
				<view class="close-btn" @click.stop="removeXingshiImage">×</view>
			</view>
		</view>

		<!-- 提交审核按钮，点击触发提交审核事件 -->
		<button class="submit-btn" @click="submitReview">提交审核</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		tokenStore
	} from '@/stores/token';
	//存放用户信息的容器
	import {
		userStore
	} from '@/stores/user';
	//引入拦截器
	import '@/config/requst.js'
	import {
		http
	} from '@/config/requst.js';
	const car = ref(null);
	// 创建一个响应式对象 formData，用于存储表单数据
	const formData = ref({
		did:'',
		// 车牌号初始为空
		carnumber: '',
		// 车主姓名初始为空
		carName: '',
		// 车辆图片路径初始为空
		carimg: null,
		driverimg:''
	});
	
	const xingshiImg = ref(null);

	// 上传从业资格证图片
	const uploadQualificationImage = () => {
		wx.chooseImage({
			count: 1,
			success(res) {
				car.value = res.tempFilePaths[0]; // 获取并存储资格证图片路径到 formData 中
				console.log("上传从业资格证图", res);
				uni.uploadFile({
					url: 'http://localhost:8080/car/upload', // 请确保这是正确的后端地址
					filePath: car.value, // 文件路径
					name: 'file', // 文件字段名
					formData: {
						'user': 'test' // 表单数据
					},
					header: {
						'Authorization': tokenStore().token // 携带token
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data); // 打印上传成功返回的数据
						let i = JSON.parse(uploadFileRes.data);
						formData.value.carimg = i.shuju
					},
					fail: (err) => {
						console.error('上传失败:', err); // 打印上传失败错误信息
					}
				});
			},
			fail(err) {
				console.log("上传从业资格证图失败", err);
			}
		});
	};
	
	// 上传行驶证正面图片
	const uploadXingshiImage = () => {
	  wx.chooseImage({
	    count: 1,
	    success(res) {
	      xingshiImg.value = res.tempFilePaths[0]; // 获取并存储正面图片路径
	      console.log("上传行驶证正面图", res);
		  uni.uploadFile({
		  	url: 'http://localhost:8080/car/upload', // 请确保这是正确的后端地址
		  	filePath: xingshiImg.value, // 文件路径
		  	name: 'file', // 文件字段名
		  	formData: {
		  		'user': 'test' // 表单数据
		  	},
		  	header: {
		  		'Authorization': tokenStore().token // 携带token
		  	},
		  	success: (uploadFileRes) => {
		  		console.log(uploadFileRes.data); // 打印上传成功返回的数据
		  		let i = JSON.parse(uploadFileRes.data);
		  		formData.value.driverimg = i.shuju
		  	},
		  	fail: (err) => {
		  		console.error('上传失败:', err); // 打印上传失败错误信息
		  	}
		  });
	    },
	    fail(err) {
	      console.log("上传行驶证正面图失败", err);
	    }
	  });
	};

	// 删除从业资格证图
	const removeQualificationImage = () => {
		formData.value.carImg = null;
	};
	// 删除行驶证正面图
	const removeXingshiImage = () => {
	  xingshiImg.value = null;
	};

	// 提交审核的方法
	const submitReview = () => {
		// 校验图片路径变量是否为空
		if (!formData.value.carimg || !formData.value.carName || !formData.value.carnumber || !formData.value.driverimg) {
			console.log('请上传所有需要的图片并填写完整信息');
			return;
		}
		formData.value.did = userStore().user.id
		console.log(formData.value)
		tj()
	};
	
	//提交审核
	const tj = async() =>{
		const res =await http({
			method:'post',
			url:'/car/ins',
			data:formData.value
		})
		if(res.code == 20041){
			uni.showToast({
					title: '提交成功',
					icon: 'success',
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/authentication/authentication'
					});
				}, 2000);
		}else{
			uni.showToast({
				title: '提交失败',
				icon: 'error',
				duration: 2000
			});
		}
	}
</script>

<style lang="scss" scoped>
	/* 顶部提示信息样式 */
	.top-prompt {
		width: 700rpx;
		height: 80rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 10rpx auto;
		border-radius: 15rpx;
		background-color: #708ac2;
		color: white;
	}

	/* 上传提示区域样式 */
	.content {
		display: flex;
		align-items: center;
		margin-top: 50rpx;

		/* 左侧蓝色竖条样式 */
		.box {
			width: 10rpx;
			height: 50rpx;
			background-color: #073496;
			border-radius: 20rpx;
			margin-left: 20rpx;
		}

		/* 提示文本样式 */
		.photo {
			line-height: 50rpx;
			margin-left: 10rpx;
		}
	}

	.file-upload {
		display: flex;
		justify-content: space-around;
	}

	.upload-btn {
		margin: 20rpx;
		width: 43%;
		height: 180rpx;
		background-color: #f1f1f1;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
	}

	.upload-icon-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 100%;
		position: relative;
	}

	.upload-text {
		font-size: 24rpx;
		color: #868686;
	}

	.upload-icon {
		width: 300rpx;
		height: 300rpx;
		background-size: cover;
		/* 保证图片完全覆盖框，并保持长宽比 */
		border-radius: 10rpx;
	}

	.uploaded {
		position: relative;
	}

	.close-btn {
		position: absolute;
		top: 5rpx;
		right: -60rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 28rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
	}

	/* 提交审核按钮样式 */
	.submit-btn {
		background-color: #5a98ff;
		color: white;
		padding: 15rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		margin: 100rpx auto;
		display: block;
		width: 80%;
	}

	/* 表单外的视图容器样式  距离顶部提示信息的外边距 */
	.biaoge {
		// 设置表单容器距离顶部提示信息的外边距
		margin-top: 30rpx;
		// 设置表单容器的宽度为 100%
		width: 100%;
	}

	/* 表单表头样式  添加左外边距  距离手机边框的距离 */
	.form-item {
		// 设置表单项距离手机边框的左外边距
		margin-left: 20rpx;
		// 使用 flex 布局，使表单标签和输入框水平排列并垂直居中
		display: flex;
		align-items: center;
		// 设置表单项之间的底部外边距
		margin-bottom: 15rpx;
	}

	.form-item label {
		// 设置表单标签的宽度
		width: 150rpx;
	}

	/* 按钮的点击效果 */
	.hover-class-1 {
		// 点击时按钮向下偏移 3rpx
		top: 3rpx;
		// 点击时按钮背景颜色变为深蓝色
		background-color: #002fa7;
	}

	.input-wrapper {
		// 使用 flex 布局，使输入框和图标水平排列并垂直居中
		display: flex;
		align-items: center;
		// 使输入框和图标在容器内均匀分布
		justify-content: space-around;
	}

	.camera-icon {
		// 设置图标宽度为 24px
		width: 24px;
		// 设置图标高度为 24px
		height: 24px;
		// 设置图标距离输入框的左外边距
		margin-left: 8px;
		// 设置鼠标悬停时显示为指针样式
		cursor: pointer;
	}

	/* 为表单输入框添加样式 */
	.no-border-input {
		// 去除输入框获得焦点时的外边框
		outline: none;
		// 设置输入框的宽度
		width: 500rpx;
		// 设置输入框的高度
		height: 80rpx;
	}

	/* 以下样式可以根据实际情况添加，用于去除可能的内阴影或其他默认样式 */
	.no-border-input::placeholder {
		// 可以根据需要调整占位符的颜色等样式，这里设置为灰色
		color: #999;
	}
</style>